<template>
  <div class="container">
    <el-card>
      <div v-if="$route.query.id">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <hr
        style="
          background-color: #ebeef5;
          margin-top: 20px;
          height: 1px;
          border: none;
        "
        v-if="$route.query.id"
      />
      <el-form :inline="true" :model="form" style="margin-top: 20px">
        <el-form-item label="关键字">
          <el-input v-model="form.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="请选择" v-model="form.state">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>

        <el-form-item style="float: right">
          <el-link type="primary" v-if="$route.query.id" @click="$router.back()"
            ><i class="el-icon-back"></i> 返回学科</el-link
          >
          <el-button
            style="margin-left: 20px"
            icon="el-icon-edit"
            type="success"
            @click="doAdd"
            >新增标签</el-button
          >
        </el-form-item>
      </el-form>
      <el-alert :closable="false" type="info" show-icon
        >数据一共{{ counts }}条</el-alert
      >
      <template>
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">
              {{ statusFormat(row.state) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-link type="primary" @click="hDis(row.id, row.state)">{{
                row.state === 0 ? "启用" : "禁用"
              }}</el-link
              >&nbsp;&nbsp;
              <el-link
                type="primary"
                :disabled="row.state === 1"
                @click="hEdit(row.id)"
                >修改</el-link
              >&nbsp;&nbsp;
              <el-link
                type="primary"
                :disabled="row.state === 1"
                @click="hDel(row.id)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-row type="flex" justify="end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParams.page"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageParams.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 新增修改弹框 -->
    <el-dialog
      v-if="showDialog"
      :title="isEdit ? '修改标签' : '新增标签'"
      :visible.sync="showDialog"
      width="20%"
    >
      <tagsAdd
        @cancel="showDialog = false"
        :curId="curId"
        :isEdit="isEdit"
        @hSuccess="success"
      />
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, changeState } from "@/api/hmmm/tags.js";
import tagsAdd from "@/module-hmmm/components/tags-add";
import { status } from "@/api/hmmm/constants.js";
const statusEnum = status.reduce((acc, item) => {
  acc[item.value] = item.label;
  return acc;
}, {});
export default {
  components: {
    tagsAdd,
  },
  data() {
    return {
      status: status,
      form: {
        state: "",
        tagName: "",
      },
      isEdit: false,
      curId: 0,
      showDialog: false,
      list: [], // 储存标签列表
      pageParams: {
        subjectID: this.$route.query.id, // 接收学科管理传过来的id
        page: 1,
        pagesize: 10,
      },
      counts: 0, // 标签总条数
    };
  },
  created() {
    this.loadlist();
  },
  methods: {
    // 清空搜索框
    resetForm() {
      this.form = {
        state: "",
        tagName: "",
      };
      this.loadlist();
    },

    // 搜索功能
    async search() {
      try {
        let data = {
          ...this.pageParams,
          tagName: this.form.tagName,
          state: this.form.state,
        };
        if (data.state === "") {
          data = { ...this.pageParams, tagName: this.form.tagName };
        }
        const res = await list(data);
        console.log(res);
        this.list = res.data.items;
      } catch (error) {
        this.$message.error(error);
      }
      // const data = this.list.filter(item => item.tagName && item.subjectName === this.searchtagName)
      // if (this.searchtagName === '') {
      //   this.loadlist()
      // } else {
      //   this.list = data
      // }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageParams.page = 1;
      this.pageParams.pagesize = val;
      this.loadlist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageParams.page = val;
      this.loadlist();
    },
    async hDis(id, state) {
      try {
        state = state === 1 ? 0 : 1;
        const res = await changeState({ id, state });
        // console.log(res)
        if (res.status !== 200) return this.$message.error("操作失败");
        this.$message.success("操作成功");
        if (this.form.tagName === "" && this.form.state === "")
          return this.loadlist();
        this.search();
      } catch (error) {
        this.$message.error(error);
      }
    },
    // 需求 启用或禁用
    statusFormat(data) {
      return statusEnum[data] || "未知";
    },
    // 删除标签
    async hDel(id) {
      this.$confirm("您确定删除此标签吗？", "提示", { type: "warning" })
        .then(async () => {
          const res = await remove({ id: id });
          console.log(res, "remove");
          if (res.status !== 200) return this.$message.error("删除文章失败");
          this.$message.success("删除文章成功");
          this.showDialog = false;
          this.list.length == 1 ? this.pageParams.page-- : ``;
          this.loadlist();
        })
        .catch((err) => err);
    },
    // 修改标签
    hEdit(id) {
      this.curId = id;
      this.isEdit = true;
      this.showDialog = true;
    },
    // 添加标签
    doAdd() {
      this.isEdit = false;
      this.showDialog = true;
    },
    success() {
      this.showDialog = false;
      this.loadlist();
    },
    // 获取标签列表
    async loadlist() {
      try {
        const res = await list(this.pageParams);
        console.log("list", res);
        this.list = res.data.items;
        this.counts = res.data.counts;
      } catch (err) {
        console.log("list", err);
      }
    },
  },
};
</script>

<style scoped lang='less'>
</style>
